  <div class="custom-card bg-charcoal-surface1 p-4">
    <h2><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
    <div class="custom-card-body bg-charcoal-surface1 p-0">
      {{- url := "" }}
      {{- if Mode == "original" || Mode == "male" || Mode == "female" || Mode == ""}}
        {{ url = "/ranking?date=" + .Data.CurrentDate + "&page=1&content=" }}
      {{- else }}
        {{- url = "/ranking?mode=" + Mode + "&date=" + .Data.CurrentDate + "&page=1&content=" }}
      {{- end }}
      <div class="row mb-4">
        <div class="col-12">
          <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
          {{ url := "/ranking?content=" + Content +"&date=" + .Data.CurrentDate + "&page=1&mode=" }}
          {{- if Content != "ugoira" }}
          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
            {{- path := slice("daily", "weekly", "monthly", "rookie") }}
            {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
          </div>
          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
            {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
            {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
          </div>
          {{- else }}
          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
            {{- path := slice("daily", "weekly") }}
            {{- name := slice("Daily", "Weekly")}}
            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
          </div>
          <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
            {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
            {{- name := slice("Daily (R-18)", "Weekly (R-18)", "Weekly (R-18G)")}}
            {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
          </div>
          {{- end }}
          {{- if Content == "all" || Content == "illust" || Content == "manga" }}
          <!-- NOTE: formatting for the i18n crawler -->
          <p class="small text-body-secondary mb-4">
            Choose the time frame for the rankings.
          </p>
          {{- else }}
          <p class="small text-body-secondary mb-0">
            Choose the time frame for the rankings.
          </p>
          {{- end }}
        </div>

      <div class="row mb-4">
        <!-- NOTE: still rendering the row element when Content == ugoira to keep things simple for margin -->
        {{- if Content != "ugoira" }}
        <div class="col-12">
          <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
          <!-- Options for Overall -->
          {{- if Content == "all" }}
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
              {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
              {{- path := slice("original", "daily_ai", "male", "female") }}
              {{- name := slice("Original", "AI-generated", "Popular among males", "Popular among females")}}
              <div class="d-none">
                <p>Original</p>
                <p>AI-generated</p>
                <p>Popular among males</p>
                <p>Popular among females</p>
              </div>
              {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
            </div>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
              {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
              {{- path := slice("daily_r18_ai", "male_r18", "female_r18") }}
              {{- name := slice("AI-generated (R-18)", "Popular among males (R-18)", "Popular among females (R-18)")}}
              {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
              <div class="d-none">
                <p>AI-generated (R-18)</p>
                <p>Popular among males (R-18)</p>
                <p>Popular among females (R-18)</p>
              </div>
            </div>
          {{- end }}
          <!-- Options for Illustrations -->
          {{- if Content == "illust" || Content == "manga" }}
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
              {{ specUrl := "/ranking?content=all&date=" + .Data.CurrentDate + "&page=1&mode=" }}
              {{- path := slice("male_r18", "female_r18") }}
              {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
              {{- yield UnderlineNav(baseURL=specUrl, paths=path, names=name, activeState=Mode)}}
              <div class="d-none">
                <p>Popular among males (R-18)</p>
                <p>Popular among females (R-18)</p>
              </div>
            </div>
          {{- end }}
          <p class="small text-body-secondary mb-0">Specialized ranking categories.</p>
          </div>
          {{- end }}
        </div>

      <div class="row">
        <div class="col-12 d-flex justify-content-between">
          <a href="/ranking" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
          <button type="button" class="custom-btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
